<template>
    <div class="mine-my-team-wrap">
        <van-nav-bar title="我的私域" left-arrow fixed @click-left="onClickLeft" />
        <div class="profit_core" v-if="inviter.level_info && inviter.level_info.items.length > 0">
            <div class="profit_team">
                <div class="profit_team_left">
                    <div v-for="(item, index) in inviter.level_info.items" :key="index" class="profit_team_left_item">
                        <div class="profit_team_left_title">{{ item.title }}</div>
                        <van-progress :percentage="calculatePercentage(item.req_val, item.now_val)" stroke-width="6px"
                            pivot-text="" pivot-color="#7232dd" color="linear-gradient(to left, #FFC100, #FFFC82)" />
                        <div class="profit_team_left_title right">{{ item.desc }}</div>
                    </div>
                </div>
                <div class="profit_team_right">
                    <img :src="inviter.level_info.icon" alt="" />
                    <div>{{ inviter.level_info.name }}</div>
                </div>
            </div>

            <div class="profit_team_tip">{{ inviter.level_info.tip_msg }}</div>
        </div>
        <!-- 待入账金额 -->
        <div class="pay_amt" >
            <div>待入账金额</div>
            <div>{{ inviter.statistics.estimate_income || 0 }}</div>
        </div>
        <!-- 团队粉丝 -->
        <div v-if="inviter.statistics" class="team-fensi" @click="handleToTeam()">
            <div class="team-fensi-tltle">团队购买私域商品套数</div>
            <div class="team-fensi-count">{{ inviter.statistics.count }}</div>
            <div class="team-fensi-ul">
                <div @click.stop="handleToTeam('yesterday')" class="team-fensi-li">
                    <div class="team-fensi-val">{{ inviter.statistics.days_count1 }}</div>
                    <div class="team-fensi-label">昨日新增</div>
                </div>
                <div @click.stop="handleToTeam('week')" class="team-fensi-li li-center">
                    <div class="team-fensi-val">{{ inviter.statistics.days_count7 }}</div>
                    <div class="team-fensi-label">近7天</div>
                </div>
                <div @click.stop="handleToTeam('month')" class="team-fensi-li">
                    <div class="team-fensi-val">{{ inviter.statistics.days_count30 }}</div>
                    <div class="team-fensi-label">近30天</div>
                </div>
            </div>

            <div @click.stop="handleToTeam('today')" class="today-btn">今日新增 {{ inviter.statistics.today_count }}</div>

        </div>

        <div class="team-static">
            <div class="team-static-title">
                <img class="team-static-title-icon" src="../../images/mine/icon_shuju.png" />
                <div class="team-static-title-text">直属粉丝购买套数</div>
            </div>
            <div class="team-static-ul">
                <div class="team-static-li">
                    <div class="team-static-li-val">{{ inviter.statistics.direct_count0 }}</div>
                    <div class="team-static-li-label">今日购买</div>
                </div>
                <div class="team-static-li">
                    <div class="team-static-li-val">{{ inviter.statistics.direct_count1 }}</div>
                    <div class="team-static-li-label">昨日购买</div>
                </div>
                <div class="team-static-li">
                    <div class="team-static-li-val">{{ inviter.statistics.direct_count30 }}</div>
                    <div class="team-static-li-label">近30天购买</div>
                </div>
            </div>
        </div>




        <div class="profit_core_title">我的直推({{ total_count }}人)</div>
        <div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="team_list" v-for="(item, index) in fansList" :key="index">
                    <div class="team_list_item">
                        <img v-if="item.avatar_url" :src="item.avatar_url" alt="" />
                        <img v-else src="../../images/mine/head.png" alt="" />
                        <div class="team_list_item_info">
                            <div>{{ item.nickname }}</div>
                            <div>
                                个人套数：{{ item.oneself_count }}&nbsp;&nbsp;团队套数：{{
                                    item.team_count
                                }}
                            </div>
                        </div>
                        <!-- <div class="team_list_item_level">经理</div> -->
                        <img v-if="item.level_icon" class="team_list_item_level" :src="item.level_icon || ''" alt="" />
                        <div v-else class="team_list_item_level"></div>
                    </div>
                </div>
            </van-list>
        </div>


    </div>
    <!-- </div> -->
</template>
<script>
import {
    PRIVATE_INFO,
    PRIVATE_FANS_LIST
} from "@/api/mine";
export default {
    data() {
        return {
            finished: false,
            loading: false,
            inviter_info: {},
            page: 1,
            pageSize: 20,
            fansList: [],
            total_count: 0,
            currentValidUsers: 2.2, // 当前有效用户数量（单位：万）
            totalValidUsers: 5, // 总有效用户数量（单位：万）
            currentValidTeam: 2.3,
            totalValidTeam: 6,
            inviter: {},
        };
    },
    mounted() {
        window.scrollTo(0, 0);
        this.$http(PRIVATE_INFO).then((res) => {
            this.inviter = res.data;
            this.inviter_info = res.data.inviter_info;
        });
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        calculatePercentage(reqVal, nowVal) {
            if (nowVal >= reqVal) {
                return 100; // 如果当前值大于或等于最高值，返回 100%
            }
            // 计算进度百分比
            const progress = (nowVal / reqVal) * 100; // 这里 nowVal 是当前值，reqVal 是最高值
            // 确保进度在 0 到 100 之间
            return Math.max(0, Math.min(100, progress));
        },
        // 列表
        handleToTeam(name) {
            return
            this.$router.push({
                name: 'teamList',
                query: {
                    name: name || ''
                }
            })
        },


        onLoad() {
            let params = {};
            params["page_num"] = this.page;
            params["page_size"] = this.pageSize;
            // params['status'] = this.active;
            this.$http.get(PRIVATE_FANS_LIST, {
                params: params
            }).then((res) => {
                const {
                    list
                } = res.data;
                this.total_count = res.data.pages.total_count;
                if (list && list.length) {
                    this.page++;
                    this.fansList = this.fansList.concat(list);

                    // 加载状态结束
                    this.loading = false;
                    if (list.length < this.pageSize) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            });
        },
    },
};
</script>
<style lang="scss">
.mine-my-team-wrap {
    min-height: 100vh;
    padding-top: 58px;
    padding-bottom: 1rem;
    background-color: #f4f4f4;
    box-sizing: border-box;

    .van-nav-bar .van-icon {
        color: #333333;
    }

    .van-nav-bar__arrow {
        font-size: 20px;
    }

    .van-hairline--bottom::after {
        display: none;
    }

    .team-invite {
        width: 7.02rem;
        height: 1.68rem;
        padding: 0.24rem 0.32rem;
        margin: auto;
        margin-bottom: 0.2rem;
        border-radius: 0.16rem;
        box-sizing: border-box;
        background-color: #FFFFFF;

        .team-invite-title {
            height: 0.4rem;
            margin-bottom: 0.1rem;
            line-height: 0.4rem;
            font-size: 0.28rem;
            font-weight: 500;
            color: #333333;
        }

        .team-invite-desc {
            display: flex;
            align-items: center;

            .team-invite-head {
                width: 0.72rem;
                height: 0.72rem;
                margin-left: 0.14rem;
                margin-right: 0.18rem;
            }

            .team-invite-name {
                font-size: 0.28rem;
                color: #333333;
            }
        }
    }

    .pay_amt {
        height: 1.66rem;
        width: 7.02rem;
        margin: 0 auto;
        margin-bottom: .2rem;
        background: url("../../images/mine/pay_icon_1.png") no-repeat center;
        background-size: cover;
        color: #FFF;

        div {
            width: 90%;
            margin: 0 auto;
            padding-top: .28rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #FFFFFF;
            line-height: 20px;
            text-align: left;
            font-style: normal;
        }

        div:last-child {
            padding-top: 0;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .6rem;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
        }
    }

    .profit_core {
        width: 7.02rem;
        margin: auto;
        margin-bottom: 0.2rem;
        padding: 0.2rem 0.28rem 0.32rem 0.32rem;
        background: linear-gradient(117deg, #F62B23 0%, #F26554 100%);
        border-radius: 0.16rem;
        box-sizing: border-box;

        .profit_team {
            display: flex;
            justify-content: space-between;

            .profit_team_left {
                width: 3.82rem;
                margin-top: 0.24rem;
                font-size: 0.24rem;
                color: #FFFFFF;

                .profit_team_left_item {
                    margin-bottom: 0.24rem;
                }

                .profit_team_left_title {
                    height: 0.34rem;
                    font-weight: 400;
                    line-height: 0.34rem;
                    margin-bottom: 0.08rem;

                    &.right {
                        margin-top: 0.08rem;
                        text-align: right;
                    }
                }
            }

            .profit_team_right {
                img {
                    display: block;
                    height: 1.54rem;
                }

                div {
                    height: 0.4rem;
                    margin-top: 0.06rem;
                    line-height: 0.4rem;
                    font-weight: 500;
                    font-size: 0.28rem;
                    text-align: center;
                    color: #FFFFFF;
                }
            }
        }

        .profit_team_tip {
            line-height: 0.34rem;
            font-weight: 400;
            font-size: 0.24rem;
            // margin-top: 0.24rem;
            color: #FFFFFF;
            opacity: 0.8;
            white-space: pre-wrap;
        }
    }

    .team-fensi {
        position: relative;
        width: 7.02rem;
        height: 2.84rem;
        padding: 0.3rem 0;
        margin: auto;
        margin-bottom: 0.2rem;
        color: #FFFFFF;
        background: url(../../images/mine/mine-team-bg.png) no-repeat center;
        background-size: cover !important;
        box-sizing: border-box;

        .today-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0.52rem;
            right: 0.4rem;
            height: 0.6rem;
            padding: 0 0.24rem;
            font-size: 0.28rem;
            color: #333333;
            border-radius: 0.3rem;
            background-color: #FFFFFF;
        }

        .team-fensi-tltle {
            height: 0.4rem;
            margin-left: 0.48rem;
            margin-bottom: 0.08rem;
            line-height: 0.4rem;
            font-size: 0.28rem;
            font-weight: 400;
            color: #FFFFFF;
        }

        .team-fensi-count {
            height: 0.74rem;
            margin-left: 0.48rem;
            margin-bottom: 0.14rem;
            line-height: 0.74rem;
            font-weight: 500;
            font-size: 0.52rem;
            color: #FFFFFF;
        }

        .team-fensi-ul {
            display: flex;
            justify-content: space-between;

            .team-fensi-li {
                flex: 1;
                text-align: center;

                &.li-center {
                    position: relative;

                    &::before {
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        content: '';
                        width: 0.02rem;
                        height: 0.5rem;
                        background: rgba(255, 255, 255, 0.2);
                    }

                    &::after {
                        position: absolute;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        content: '';
                        width: 0.02rem;
                        height: 0.5rem;
                        background: rgba(255, 255, 255, 0.2);
                    }
                }

                .team-fensi-val {
                    height: 0.44rem;
                    margin-bottom: 0.08rem;
                    line-height: 0.44rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                }

                .team-fensi-label {
                    font-weight: 400;
                    font-size: 0.24rem;
                    opacity: 0.8;
                }
            }
        }
    }

    .team-static {
        width: 7.02rem;
        height: 2.52rem;
        margin: auto;
        border-radius: 0.16rem;
        background-color: #FFFFFF;
        overflow: hidden;

        .team-static-title {
            display: flex;
            align-items: center;
            height: 0.72rem;
            padding: 0 0.24rem;
            box-sizing: border-box;
            background-color: rgba(243, 42, 35, 0.1);

            .team-static-title-icon {
                width: 0.32rem;
                height: 0.32rem;
                margin-right: 0.16rem;
            }

            .team-static-title-text {
                font-size: 0.28rem;
                font-weight: 500;
                color: #333333;
            }
        }

        .team-static-ul {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .team-static-li {
                flex: 1;
                margin-top: 0.4rem;
                text-align: center;

                .team-static-li-val {
                    height: 0.44rem;
                    margin-bottom: 0.16rem;
                    line-height: 0.44rem;
                    font-size: 0.32rem;
                    font-weight: 500;
                    color: #333333;
                }

                .team-static-li-label {
                    height: 0.4rem;
                    line-height: 0.4rem;
                    font-size: 0.28rem;
                    color: #666666;
                }
            }
        }
    }


}

.profit_core_title {
    width: 95%;
    margin: 0 auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: .28rem;
    color: #333333;
    // line-height: 18px;
    text-align: left;
    font-style: normal;
    padding-top: .32rem;
}

.team_list {
    width: 95%;
    margin: 0 auto;

    .team_list_item {
        display: flex;
        justify-content: space-between;
        padding: .3rem;
        background-color: #fff;
        border-radius: 8px;
        margin-top: .2rem;

        img {
            width: .76rem;
            height: .76rem;
            border-radius: .76rem;
        }

        .team_list_item_info {
            width: 60%;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #333333;
            line-height: .4rem;
            // text-align: left;
            font-style: normal;

            div:last-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .24rem;
                color: #999999;
                // line-height: 14px;
                text-align: left;
                font-style: normal;
            }
        }

        .team_list_item_level {
            width: 1.24rem;
            height: .46rem;
            margin-top: .2rem;
        }
    }
}
</style>
